<template>
	<uv-navbar
		:leftIcon="leftIcon"
	    :leftText="leftText"
	    :title="title"
		:rightText="rightText"
		:placeholder="placeholder"
		:bgColor="bgColor"
		:leftIconColor="leftIconColor"
		:titleStyle="titleStyle"
		:autoBack="!selfBack"
		@leftClick="leftClick">
		<view class="u-nav-slot" slot="left" v-if="leftText" @click="leftClick">{{leftText}}</view>
		<view class="u-nav-slot" slot="right" v-if="rightText" @click="rightClick">
			<text v-if="!isShowRightIcon" class="u-nav-right-text">{{rightText}}</text>
			<image v-else style="width: 24px;height: 24px;" :src="rightText" mode=""></image>
		</view>
	</uv-navbar>
</template>

<script setup lang="ts">
	import { defineProps, withDefaults, defineEmits } from 'vue'
	
	interface Props {
		bgColor?: string
		title?: string
		leftText?: string
		rightText?: string
		selfBack?: boolean
		leftIcon?: string
		leftIconColor?: string
		titleStyle?: any
		isShowRightIcon?: boolean,
		placeholder?: boolean
	}
	const props = withDefaults(defineProps<Props>(), {
		bgColor : 'transparent',
		title: '',
		leftText: '',
		rightText: '',
		selfBack: false,
		leftIcon: 'arrow-left',
		leftIconColor: '#fff',
		titleStyle: {
			"color": '#fff',
			'fontWeight': '500'
		},
		isShowRightIcon: false,
		placeholder: true
	})
	
	const emit = defineEmits(['leftClick', 'rightClick'])
	
	const leftClick = () => {
		if(props.selfBack) {
			emit('leftClick')
		}
	}
	
	const rightClick = () => {
		emit('rightClick')
	}
</script>

<style scoped lang="scss">
	.u-nav-right-text {
		font-size: 16px;
		color: $theme-white;
	}
</style>
